<template>
  <div>
      <!-- 地层温度压力-->
      <el-row>
          <!-- 查询栏 -->
          <el-form :inline="true" :model="searchModel">
              <el-col :sm="8" :md="8" :lg="4" :xl="3">
                  <el-form-item>
                      <el-input placeholder="请填写井名" v-model="searchModel.wellName" clearable maxlength="20" />
                  </el-form-item>
              </el-col>
              <el-col :sm="8" :md="8" :lg="4" :xl="3">
                  <el-form-item>
                      <el-select v-model="searchModel.wellType" clearable placeholder="请选择井型">
                          <el-option
                          v-for="item in wellTypeOptions"
                          :key="item"
                          :label="item"
                          :value="item"
                          :disabled="item.disabled">
                          </el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :sm="8" :md="8" :lg="4" :xl="3">
                  <el-form-item>
                      <el-select v-model="searchModel.wellCategory" clearable placeholder="请选择井别">
                          <el-option
                          v-for="item in wellClassesOptions"
                          :key="item"
                          :label="item"
                          :value="item"
                          :disabled="item.disabled">
                          </el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :sm="16" :md="16" :lg="8" :xl="5">
                  <el-form-item>
                      <el-date-picker
                      v-model="searchModel.startDrillDate"
                      type="date"
                      align="right"
                      value-format="yyyy-MM-dd"
                      style="width: 47%"
                      placeholder="开始日期">
                      </el-date-picker>
                      <span style="color: #C0C0C0">&nbsp;-&nbsp;</span>
                      <el-date-picker
                      v-model="searchModel.endDrillDate"
                      type="date"
                      align="right"
                      value-format="yyyy-MM-dd"
                      style="width: 47%"
                      placeholder="结束日期">
                      </el-date-picker>
                  </el-form-item>
              </el-col>
              <el-col :sm="4" :md="4" :lg="2" :xl="1">
                  <el-form-item>
                      <el-button type="primary" @click="submitSearchModel">查询</el-button>
                  </el-form-item>
              </el-col>
			  <el-col :sm="4" :md="4" :lg="2" :xl="1">
			      <el-form-item>
			          <el-button type="success" @click="submitAddModel" >新增</el-button>
			      </el-form-item>
			  </el-col>
          </el-form>
      </el-row>
    <!-- 查询结果表格展示 -->
    <el-row style="width: 100%">
        <el-table
            :data="tableData"
            border
            style="width: 100%; font-size: 10px"
            :max-height="tableHeight"
            :header-row-style="rowStyle"
            :header-cell-style="cellStyle"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            stripe
        >
            <el-table-column
                v-if="tableHead[0]"
                :label="tableHead[0].label"
                :prop="tableHead[0].property"
                width="100"
                align="center"
                fixed="left"
            />
            <el-table-column
                v-for="(item, index) in tableHead.slice(1)"
                :label="item.label"
                :property="item.property"
                :key="index"
                width="80"
                show-overflow-tooltip
                align="center"
            />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 显示页数 -->
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="pageIdx"
                :page-size="pageSizes"
                :total="totalData"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="基础数据修改" :visible.sync="editVisible" width="60%">
            <el-form :model="form" ref="form" label-width="100px">
                <!-- 自定义编辑内容样式 -->
                <!-- <el-col :span="12">
                    <el-form-item label="井名id">
                        <el-input :disabled="true" v-model="form.wellid"></el-input>
                    </el-form-item>
                </el-col> -->       
                <el-col :span="12">
                    <el-form-item label="井名">
                        <el-select v-model="form.wellname" clearable placeholder="请选择井名" style="width:100%">
                            <el-option
                            v-for="item in wellNameOptions"
                            :key="item"
                            :label="item"
                            :value="item"
                            :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
				<el-col :span="12">
				    <el-form-item label="钻头尺寸">
				        <el-input v-model="form.bitsize"></el-input>
				    </el-form-item>
				</el-col>
				<el-col :span="12">
				    <el-form-item label="套管层次">
				        <template> 
				        <el-select v-model="form.caselevel" clearable placeholder="请选择套管层次" style="width:100%"> 
				            <el-option
				            v-for="item in caselevelOptions"
				            :key="item"
				            :label="item"
				            :value="item"
				            :disabled="item.disabled">
				            </el-option>
				        </el-select>
				        </template>
				    </el-form-item>
				</el-col>
				<el-col :span="12">
				    <el-form-item label="井底温度">
				        <el-input v-model="form.bht"></el-input>
				    </el-form-item>
				</el-col>
				<el-col :span="12">
				    <el-form-item label="循环温度">
				        <el-input v-model="form.bct"></el-input>
				    </el-form-item>
				</el-col>
				<el-col :span="12">
				    <el-form-item label="系数">
				        <el-input v-model="form.coefficient"></el-input>
				    </el-form-item>
				</el-col>
				<el-col :span="12">
				    <el-form-item label="井底压力">
				        <el-input v-model="form.bhp"></el-input>
				    </el-form-item>
				</el-col>
                
                <!-- 此处还可以添加内容 -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveNew" v-if="isNewData">确 定</el-button>
                <el-button type="primary" @click="saveEdit" v-else>确 定</el-button>
            </span>
        </el-dialog>
    </el-row>
  </div>
</template>

<script>
import {
	GetDataClassificationMenus,
	GetTableHead,
	GetTableData,
	ListDataDictByCondition,
    GetWellList
} from '../../../../api/module/dataClassification/data_classification'
import{
	EditStratum,
	DeleteStratum,
	InsertStratum,
	FindStratumByCondition
}from '../../../../api/module/dataClassification/basicData/stratum'
export default {
    data() {
        return {
            menuName: this.$route.query.menuName,  //页面跳转获取的页面名称
            //查询行的数据
            searchModel: { //查询部分默认的绑定值
				wellName: '', //井名
				wellType: '', //井型
				wellCategory: '', //井别
				startDrillDate: '', //开钻日期
				endDrillDate: '', //完钻日期
				currentPage: 1, //当前页
				pageSize: 10 //页大小
			},
			wellTypeOptions: [], //井型
			wellClassesOptions: [], //井别
			caselevelOptions: [], //套管层次
			wellNameOptions: [], //井名
            //表格数据
            tableData: [], 
            tableHead: [],
            //分页条数据
            pageIdx: 1,
			pageSizes: 10,
			totalData: 0,
            //table展示数据（样式）
            tableHeight: this.$route.query.tableHeight,
            rowStyle: { height: '30px' },
            cellStyle: {
				padding: 0,
				// 'border-bottom': '1px solid #111111',
				// 'border-right': '1px solid #111111'
			},
            //编辑框数据
            editVisible: false,
			form: {},//每行数据
            idx: -1,//修改行id
			//新增和编辑的判断
			isNewData: false
        }
    },
    created() {
        // console.log("menuName: " + this.$route.query.menuName)
        //开始查询表数据
        this.getTableHead()
        this.getTableData()
    },
    mounted() {
    },
    methods: {
        // 获取表头
		getTableHead () {
			GetTableHead(this.menuName)
				.then(res => {
					this.tableHead = res.data
					// console.log(this.tableHead);
					//获取到表头后，获取下拉框
					this.ListDataDictByConditionWellType()//井型字典
					this.ListDataDictByConditionWellClasses() //井别字典
					this.ListDataDictByConditionWellName()//井名字典
					this.ListDataDictByConditionCaselevel()//套管层次字典
				})
				.catch(err => {
					console.log("获取表头" + err);
					this.$message.error('查询出错，请刷新！')
				})
		},
		// 获取表格数据
		getTableData () {
			GetTableData(
				this.menuName,
				this.pageIdx,
				this.pageSizes,
				this.searchModel
			)
            .then(res => {
                //console.log(res)
                if (res.data) {
                    this.tableData = res.data.data
                    console.log(this.tableData)
                } else {
                    this.tableData = []
                }
                this.totalData = res.data.total
            })
            .catch(err => {
                console.log("获取表格数据" + err)
                this.$message.error('查询出错，请刷新！')
            })
		},
		//获取井型下拉列表
		 ListDataDictByConditionWellClasses() {
		     ListDataDictByCondition("井型")
		     .then(res => {
		         // console.log(res.data)
		         this.wellClassesOptions = res.data
		     })
		 },
		 //获取井别下拉列表
		ListDataDictByConditionWellType() {
		     ListDataDictByCondition("井别")
		     .then(res => {
		         // console.log(res.data)
		         this.wellTypeOptions = res.data
		     })
		 },
		 //获取井名下拉列表
		  ListDataDictByConditionWellName() {
		      GetWellList()
		      .then(res => {
		          // console.log(res.data)
		          this.wellNameOptions = res.data
		      })
		  },
		  //获取套管层次
		  ListDataDictByConditionCaselevel() {
		      ListDataDictByCondition("套管层次")
		      .then(res => {
		          // console.log(res.data)
		          this.caselevelOptions = res.data
		      })
		  },
		//保存新增数据
		InsertStratum() {
		    InsertStratum(this.form) 
		    .then(res => {
		        console.log(res)
				console.log(this.form)
		    })
		    .catch(err => {
		        console.log("新增数据" + err)
		        this.$message.error('保存出错，请刷新！')
		    })
		},
        //保存修改数据
        EditStratum() {
            // console.log(this.form)
            EditStratum(this.form)
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log("保存数据" + err)
                this.$message.error('保存出错，请刷新！')
            })

        },
        //删除数据
        DeleteStratum(stratumid) {
            console.log(this.form.stratumid)
            DeleteStratum(stratumid) 
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log("删除数据" + err)
                this.$message.error('删除出错，请刷新！')
            })
        },
        //查询数据
        FindStratumByCondition() {
			console.log(this.searchModel)
            FindStratumByCondition(this.searchModel)
            .then(res => {
                console.log(res) 
                this.tableData = res.data.stratumList
            })
            .catch(err => {
                console.log("查询数据" + err)
                this.$message.error('查询出错，请刷新！')
            })
        },
		//新增数据
		submitAddModel () {
		    this.editVisible = true
		    this.isNewData = true
		    this.form = {}
		},
		//保存新增
		saveNew() {
		    //新增的代码
		   //新增的代码
		   this.editVisible = false
		   if(this.form.wellname==null){
		   	this.$message.success(`新增数据为空，新增失败`)
		   }else{
		   	this.$message.success(`新增成功`)
		   	// this.tableData.push(this.form) //将展示内容修改
		   	this.InsertStratum()
		   } 
		},
        //点击查询
        submitSearchModel () {
			this.pageIdx =1
			this.FindStratumByCondition()
		},
        // 点击具体行数据--编辑
		handleEdit (index, row) {
			this.editVisible = true
            this.idx = index
			this.isNewData = false
			this.form = row
			// console.log(index,row);
		},
        // 保存编辑数据
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`)
            this.$set(this.tableData, this.idx, this.form) //将展示内容修改
            //修改数据库数据操作
            this.EditStratum()
        },
		//点击具体行数据--删除
		handleDelete (index, row) {
			console.log(index)
            console.log(row)
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
            .then(() => {
                this.$message.success('删除成功')
                this.tableData.splice(index, 1)
                //删除数据库数据操作
				console.log(row.stratumid)
                this.DeleteStratum(row.stratumid)
            })
            .catch(() => {});
		},
        // 分页导航
        handlePageChange(page) {
            // this.$set(this.pageIdx, page)
            this.pageIdx = page
            this.currentPage = page
            // console.log(this.pageIdx)
            this.FindStratumByCondition()
        }
    }
}
</script>

<style>

</style>
